<template>
	<scroll-view scroll-y class="scroll-container">
		<!-- 1. 顶部轮播图 -->
		<swiper class="swiper" autoplay interval="3000" circular>
			<swiper-item>
				<image src="/static/city1.png" class="swiper-img" mode="widthFix" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city2.jpg" class="swiper-img" mode="widthFix" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city3.jpg" class="swiper-img" mode="widthFix" />
			</swiper-item>
		</swiper>

		<!-- 2. 城市介绍 -->
		<view class="city-intro">
			<text class="section-title">泉州介绍</text>
			<rich-text :nodes="cityIntro"></rich-text>
		</view>

		<!-- 3. 探索进度 -->
		<view class="progress-section">
			<text class="section-title">探索进度</text>
			<view class="progress-info">
				<text>当前进度: {{ progress }}%</text>
				<progress :percent="progress" stroke-width="6" />
				<text>{{ progress }}%</text>
			</view>
		</view>

		<!-- 4. 城市选择 -->
		<view class="city-picker-section">
			<text class="section-title">选择城市</text>
			<picker @change="onCityChange" :range="provinceList" range-key="name" :value="provinceIndex">
				<view class="picker-display">
					当前选择: {{ selectedProvince }} - {{ selectedCity }} - {{ selectedDistrict }}
				</view>
			</picker>
		</view>

		<!-- 5. 媒体展示（视频） -->
		<view class="video-section">
			<text class="section-title">泉州宣传</text>
			<video :src="videoSrc" controls poster="/static/video-poster.jpg" class="city-video"></video>
			<view class="music-section">
				<text class="section-title">泉州背景音乐</text>
				<button @click="playMusic" class="play-btn">播放</button>
				<text>泉州南音 - 泉州传统乐团</text>
			</view>
		</view>

		<!-- 6. 偏好设置 -->
		<view class="preference-section">
			<text class="section-title">偏好设置</text>
			<view class="travel-mode">
				<text>出行方式:</text>
				<radio-group @change="onTravelModeChange">
					<radio :value="item" :checked="travelMode === item" v-for="item in travelModes" :key="item">
						{{ item }}
					</radio>
				</radio-group>
			</view>
			<view class="recommend-toggle">
				<text>显示推荐景点:</text>
				<switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
			</view>
			<view class="search-radius">
				<text>探索半径: {{ searchRadius }}km</text>
				<slider @change="onSearchRadiusChange" :value="searchRadius" min="1" max="20" class="radius-slider">
				</slider>
				<navigator url="/pages/tabBar/tabcompage/tabcompag">
					<button @click="open('dis')">城市探索</button>
				</navigator>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图相关
				// 需将泉州风景图放在 static 目录下，如 quanzhou1.jpg、quanzhou2.jpg、quanzhou3.jpg
				// 城市介绍富文本内容
				cityIntro: `<p><strong>海上丝绸之路起点 - 泉州</strong></p><p style="color: #333;">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p><p style="color: #333;">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p><p style="color: #333;">特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>`,
				// 探索进度
				progress: 60,
				// 城市选择相关
				provinceList: [{
					name: "福建省",
					cities: [{
						name: "泉州市",
						districts: ["丰泽区", "鲤城区", "洛江区", "泉港区"],
					}, ],
				}, ],
				provinceIndex: 0,
				cityIndex: 0,
				districtIndex: 0,
				selectedProvince: "福建省",
				selectedCity: "泉州市",
				selectedDistrict: "丰泽区",
				// 视频相关，需替换为实际泉州宣传视频地址
				videoSrc: "/static/city-video.mp4",
				// 偏好设置相关
				travelModes: ["公交", "自驾", "步行"],
				travelMode: "公交",
				showRecommend: true,
				searchRadius: 12,
				// 音频相关（简单模拟）
				audioContext: null,
			};
		},
		onLoad() {
			// 初始化音频上下文（实际播放音乐时使用）
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = "/static/quanzhou_music.mp3"; // 需将泉州背景音乐放在 static 目录下
		},
		methods: {
			// 城市选择变化
			onCityChange(e) {
				const provinceIdx = e.detail.value;
				this.provinceIndex = provinceIdx;
				this.selectedProvince = this.provinceList[provinceIdx].name;
				// 这里简化处理，实际三级联动需更复杂逻辑，根据省索引获取市列表，再根据市索引获取区列表
				this.selectedCity = this.provinceList[provinceIdx].cities[0].name;
				this.selectedDistrict = this.provinceList[provinceIdx].cities[0].districts[0];
			},
			// 出行方式变化
			onTravelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			// 显示推荐景点开关变化
			onShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			// 探索半径变化
			onSearchRadiusChange(e) {
				this.searchRadius = e.detail.value;
			},
			open(e) {
				uni.navigateTo({
					url:"/pages/tabBar/tabcompage/tabcompag"
				})
			},
			// 播放音乐
			playMusic() {
				if (this.audioContext) {
					this.audioContext.play();
					uni.showToast({
						title: "正在播放泉州背景音乐",
						icon: "none",
					});
				}
			},
		},
		onUnload() {
			// 页面卸载时销毁音频上下文，避免内存泄漏
			if (this.audioContext) {
				this.audioContext.destroy();
			}
		},
	};
</script>

<style scoped>
	.scroll-container {
		height: 100vh;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx;
		display: block;
	}

	.city-intro,
	.progress-section,
	.city-picker-section,
	.video-section,
	.preference-section {
		margin: 30rpx;
	}

	.progress-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
	}

	.picker-display {
		border: 1px solid #eee;
		padding: 20rpx;
		border-radius: 8rpx;
		margin: 0 20rpx;
	}

	.city-video {
		width: 100%;
		height: 400rpx;
	}

	.play-btn {
		background-color: #007aff;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		margin: 10rpx 0;
	}

	.travel-mode,
	.recommend-toggle,
	.search-radius {
		margin: 20rpx;
	}

	.radius-slider {
		width: 200rpx;
	}
</style>